<template>
  <el-form :model="item" :rules="rules" style="max-width: 800px; margin-top: 20px">
    <el-form-item label="商品名称" label-width="100px" prop="itemName">
      <el-input v-model="item.itemName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="商品价格" label-width="100px" prop="itemPrice">
      <el-input-number v-model="item.itemPrice"></el-input-number>
    </el-form-item>
    <el-form-item label="商品描述" label-width="100px" prop="itemDesc">
      <el-input v-model="item.itemDesc" type="textarea"></el-input>
    </el-form-item>
    <el-form-item label="上下架" label-width="100px" prop="itemStatus">
      <el-switch
        v-model="item.itemStatus"
        :active-value="0"
        :inactive-value="1"
        active-text="上架"
        inactive-text="下架"
        inline-prompt
      />
    </el-form-item>
    <el-form-item label="商品分类" label-width="100px" prop="cateId">
      <el-tree-select
        v-model="item.cateId"
        check-strictly
        :data="cates"
        :props="{
          label: 'cateName',
          value: 'id',
        }"
        :render-after-expand="false"
      />
    </el-form-item>
    <el-form-item label="商品图片" label-width="100px">
      <el-upload
        action="/api/upload"
        accept=".jpg,.png,.gif"
        :on-success="uploadImg"
        list-type="picture-card"
        v-model:file-list="fileLists"
        :before-upload="beforeUpload"
      >
        <el-button :icon="Upload" />
      </el-upload>
    </el-form-item>
    <el-form-item label="商品详情" label-width="100px">
      <EditorComponent
        :editorConfig="editorConfig"
        :toolbarConfig="toolbarConfig"
        v-model="item.content"
        @onCreated="onCreated"
      />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import type { Cate } from "@/types/cate";
import { reactive, onMounted, ref } from "vue";
import { getCates } from "@a/cate";
import { ElMessage } from "element-plus";
import { Upload } from "@element-plus/icons-vue";
import EditorComponent from "@/components/EditorComponent.vue";

let editor: any = null;
const editorConfig = {
  placeholder: "请输入商品详情",
  MENU_CONF: {
    uploadImage: {
      server: "/api/upload",
      customInsert: (res: any, insertFn: any) => {
        if (res.code === 200) {
          insertFn(res.data.url);
        }
      },
    },
  },
};
const toolbarConfig = {};
const onCreated = (_editor: any) => {
  editor = _editor;
};
const rules = {
  itemName: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
  itemPrice: [
    { required: true, type: "number", message: "请输入商品价格", trigger: "blur" },
  ],
};
const item = reactive<any>({
  itemName: "",
  itemPrice: 0,
  itemDesc: "",
  itemStatus: 0,
  imgs: [],
  cateId: -1,
  content: `<h1>这是初始值</h1>`,
});

setTimeout(() => {
  item.content = "值改变了";
}, 2000);

// 已上传图片回显
const fileLists = ref<any[]>([]);

// 图片上传
const uploadImg = (res: any) => {
  if (res.code === 200) {
    item.imgs.push(res.data.url);
  }
};
// 限制上传体积
const beforeUpload = (file: any) => {
  if (file.size > 1024 * 500) {
    ElMessage.error("上传图片不能大于500kb");
    return false;
  } else {
    return true;
  }
};

// 获取所有分类 作为 树形 下拉 选项 新增商品分类
const cates = ref<Cate[]>();
const fetchCates = () => {
  getCates().then((res: any) => {
    if (res.code === 200) {
      cates.value = [
        {
          id: -1,
          cateName: "顶层分类",
        },
        ...res.data,
      ];
    }
  });
};
onMounted(() => {
  fetchCates();
});

defineOptions({
  name: "ItemAdd",
});
</script>

<style scoped></style>
